<template>
  <div class="main">
    <!-- 统计数据卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stats-item">
            <div class="stats-number">{{ stats.total }}</div>
            <div class="stats-label">所有访客</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stats-item">
            <div class="stats-number">{{ stats.current }}</div>
            <div class="stats-label">当前访客</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stats-item">
            <div class="stats-number">{{ stats.pending }}</div>
            <div class="stats-label">待访来客</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 工具栏 -->
    <el-card shadow="never" class="mb-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
            clearable
            style="width: 240px"
          />
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号"
            clearable
            style="width: 240px"
          />
          <el-input
            v-model="searchForm.cardId"
            placeholder="请输入证件号"
            clearable
            style="width: 240px"
          />
          <el-select
            v-model="searchForm.sex"
            placeholder="性别"
            clearable
            style="width: 120px"
          >
            <el-option value="1" label="男" />
            <el-option value="0" label="女" />
          </el-select>
          <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
        </div>
        <el-button type="primary" @click="showAddDialog">
          <el-icon><Plus /></el-icon>
          新增访客
        </el-button>
      </div>
    </el-card>

    <!-- 访客列表表格 -->
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column prop="id" label="ID" width="80" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center" />
        <el-table-column prop="image" label="图片" width="100" align="center">
          <template v-slot="scope">
            <el-popover placement="right" title="" trigger="hover">
              <img
                :src="cleanAvatarUrl(scope.row.image)"
                style="height: 140px; width: 200px"
              />
              <template v-slot:reference>
                <img
                  :src="cleanAvatarUrl(scope.row.image)"
                  :alt="scope.row.name"
                  style="max-height: 60px; max-width: 60px"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardId"
          label="证件号"
          width="200"
          align="center"
        />
        <el-table-column prop="phone" label="联系方式" align="center" />
        <el-table-column
          prop="createTime"
          label="到访时间"
          :formatter="dataFormat"
          align="center"
        />
        <el-table-column
          prop="updateTime"
          label="离开时间"
          :formatter="dataFormat"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row.updateTime === scope.row.createTime">
              未离开
            </span>
            <span v-else>
              {{ scope.row.updateTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="cell" label="小区" width="120" align="center" />
        <el-table-column label="操作" fixed="right" width="80" align="center">
          <template #default="scope">
            <el-button type="danger" text @click="handleDelete(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container mt-4">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑访客对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
      custom-class="visitor-dialog-modern"
    >
      <div class="visitor-form-container modern-layout">
        <!-- 左侧表单区域 -->
        <div class="form-content">
          <el-form
            ref="formRef"
            :model="formData"
            :rule="formRules"
            label-position="top"
            class="visitor-form"
          >
            <div class="form-grid">
              <el-form-item label="姓名" prop="name" class="form-item-modern">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入访客姓名"
                  class="modern-input"
                />
              </el-form-item>

              <el-form-item
                label="联系方式"
                prop="phone"
                class="form-item-modern"
              >
                <el-input
                  v-model="formData.phone"
                  placeholder="请输入手机号码"
                  class="modern-input"
                />
              </el-form-item>
            </div>

            <div class="form-grid">
              <el-form-item
                label="证件号码"
                prop="cardId"
                class="form-item-modern"
              >
                <el-input
                  v-model="formData.cardId"
                  placeholder="请输入证件号码"
                  class="modern-input"
                />
              </el-form-item>

              <el-form-item label="性别" prop="sex" class="form-item-modern">
                <div class="gender-selector">
                  <el-radio-group v-model="formData.sex" class="gender-options">
                    <el-radio :label="1" class="gender-option">
                      <!-- <span class="gender-icon male-icon" /> -->
                      <span>男</span>
                    </el-radio>
                    <el-radio :label="0" class="gender-option">
                      <!-- <span class="gender-icon female-icon" /> -->
                      <span>女</span>
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </div>

            <!-- 被访楼栋信息 -->
            <el-divider content-position="left">
              <span class="divider-text">被访楼栋信息</span>
            </el-divider>

            <div class="building-info-container">
              <el-form-item label="" prop="cellId" class="building-item">
                <div class="building-select-container">
                  <div class="building-select-wrapper">
                    <el-select
                      v-model="formData.cellId"
                      placeholder="选择小区"
                      style="width: 140px"
                      class="building-select"
                      @change="loadBuildingList"
                    >
                      <el-option
                        v-for="item in communities"
                        :key="item.cellId"
                        :label="item.cell"
                        :value="item.cellId"
                      />
                    </el-select>
                    <span class="building-label">小区</span>
                  </div>

                  <div class="building-select-wrapper">
                    <el-select
                      v-model="formData.cellBuilding"
                      placeholder="栋"
                      style="width: 80px"
                      class="building-select"
                      @change="loadUnitList"
                    >
                      <el-option
                        v-for="item in cellBuildings"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                    <span class="building-label">栋</span>
                  </div>

                  <div class="building-select-wrapper">
                    <el-select
                      v-model="formData.cellUnit"
                      placeholder="单元"
                      style="width: 80px"
                      class="building-select"
                      @change="loadHouseList"
                    >
                      <el-option
                        v-for="item in cellUnits"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                    <span class="building-label">单元</span>
                  </div>

                  <div class="building-select-wrapper">
                    <el-select
                      v-model="formData.cellHouse"
                      placeholder="房号"
                      style="width: 100px"
                      class="building-select"
                    >
                      <el-option
                        v-for="item in cellHouses"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 右侧图片上传区域 -->
        <div class="form-image">
          <div class="image-upload-wrapper">
            <div class="image-upload-header">
              <el-icon><Camera /></el-icon>
              <span class="upload-title">访客照片</span>
            </div>
            <el-upload
              class="avatar-uploader"
              :action="'/api/upload/image'"
              name="image"
              :show-file-list="false"
              :on-success="handleImageUpload"
              :before-upload="beforeAvatarUpload"
            >
              <div v-if="formData.image" class="avatar-container">
                <img
                  :src="cleanAvatarUrl(formData.image)"
                  class="avatar"
                  :alt="formData.name || '访客照片'"
                />
                <div class="avatar-overlay">
                  <span class="change-text">点击更换</span>
                </div>
              </div>
              <div v-else class="avatar-uploader-placeholder">
                <el-icon class="upload-icon"><Plus /></el-icon>
                <div class="upload-instruction">
                  <div class="upload-text">点击拍照</div>
                  <div class="upload-hint">
                    支持 JPG、PNG 格式<br />大小不超过 2MB
                  </div>
                </div>
              </div>
            </el-upload>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="cancel-button" @click="dialogVisible = false">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
          <el-button type="primary" class="submit-button" @click="handleSubmit">
            <el-icon><Check /></el-icon>
            确认提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 导入日期组件
import moment from "moment";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Camera, Close, Check } from "@element-plus/icons-vue";
import type { Visitor, VisitorListParams, VisitorStats } from "@/api/visitor";
import { getVisitorList, addVisitor, deleteVisitor } from "@/api/visitor";
import { useUserStore } from "@/store/modules/user";
import {
  findAllCells,
  searchBuildingList,
  searchUnitList,
  searchHouseList
} from "@/api/cell";

// 增加一个格式化日期的函数
const dataFormat = (row, column) => {
  const date = row[column.property];
  if (date == undefined) {
    return "";
  }
  return moment(date).format("YYYY-MM-DD hh:mm:ss");
};

// 定义组件名称
defineOptions({ name: "DataCenterVisitor" });

// 状态管理
const loading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref("新增访客");
const formRef = ref();

// 统计数据
const stats = reactive<VisitorStats>({
  total: 129,
  current: 56,
  pending: 18
});

// 清理头像URL中的反引号和空格
const cleanAvatarUrl = (url: string) => {
  if (!url) return "";
  // 移除反引号和前后空格
  return url.replace(/`/g, "").trim();
};

// 搜索表单
const searchForm = reactive<VisitorListParams>({
  page: 1,
  size: 10,
  sex: undefined
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 表格数据
const tableData = ref<Visitor[]>([]);

// 表单数据
const formData = reactive({
  name: "",
  sex: 1,
  phone: "",
  cardId: "",
  image: "",
  cellId: undefined,
  cellBuilding: undefined,
  cellUnit: undefined,
  cellHouse: "",
  tenantId: undefined
});

// 表单验证规则
const formRules = reactive({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
  ],
  cardId: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
  cellId: [{ required: true, message: "请选择小区", trigger: "change" }],
  cellBuilding: [{ required: true, message: "请输入楼栋号", trigger: "blur" }],
  cellUnit: [{ required: true, message: "请输入单元号", trigger: "blur" }],
  cellHouse: [{ required: true, message: "请输入房号", trigger: "blur" }]
});

// 小区列表（实际项目中应从API获取）
const communities = reactive([]);

// 楼栋列表
const cellBuildings = reactive([]);

// 单元列表
const cellUnits = reactive([]);

// 房号列表
const cellHouses = reactive([]);

// 获取小区列表
const loadCellList = async () => {
  try {
    const res = await findAllCells();
    if (res.code === 0 && res.data) {
      // 直接使用res.data作为小区列表，并将字段映射为前端需要的格式
      communities.splice(
        0,
        communities.length,
        ...(res.data.map(item => ({
          cellId: item.id,
          cell: item.name
        })) || [])
      );
    } else {
      ElMessage.error(res.message || "获取小区列表失败");
    }
  } catch (error) {
    console.error("获取小区列表失败:", error);
    ElMessage.error("获取小区列表失败");
  }
};

// 搜索楼栋列表
const loadBuildingList = async (cellId: number) => {
  const res = await searchBuildingList(cellId);
  if (res.code === 0 && res.data) {
    cellBuildings.splice(
      0,
      cellBuildings.length,
      ...(res.data.map(item => ({
        id: item.id,
        name: item.name
      })) || [])
    );
  } else {
    ElMessage.error(res.message || "获取楼栋列表失败");
  }
};

// 搜索单元列表
const loadUnitList = async (buildingId: number) => {
  const res = await searchUnitList(buildingId);
  if (res.code === 0 && res.data) {
    cellUnits.splice(
      0,
      cellUnits.length,
      ...(res.data.map(item => ({
        id: item.id,
        name: item.name
      })) || [])
    );
  } else {
    ElMessage.error(res.message || "获取单元列表失败");
  }
};

// 搜索单元列表
const loadHouseList = async (unitId: number) => {
  const res = await searchHouseList(unitId);
  if (res.code === 0 && res.data) {
    cellHouses.splice(
      0,
      cellHouses.length,
      ...(res.data.map(item => ({
        id: item.id,
        name: item.number
      })) || [])
    );
  } else {
    ElMessage.error(res.message || "获取房号列表失败");
  }
};

// 生命周期
onMounted(() => {
  loadVisitorList();
  loadCellList();
});

// 加载访客列表
const loadVisitorList = async () => {
  loading.value = true;
  try {
    const params: VisitorListParams = {
      ...searchForm,
      page: pagination.currentPage,
      size: pagination.pageSize
    };
    const res = await getVisitorList(params);
    if (res.code === 0 && res.data) {
      // 修改这里，直接使用res.data作为访客数组
      tableData.value = Array.isArray(res.data) ? res.data : [];
      // 设置总数为数组长度
      pagination.total = Array.isArray(res.data) ? res.data.length : 0;
    } else {
      ElMessage.error(res.message || "获取访客列表失败");
    }
  } catch (error) {
    console.error("获取访客列表失败:", error);
    ElMessage.error("获取访客列表失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1;
  loadVisitorList();
  // 数据清空
  searchForm.name = "";
  searchForm.phone = "";
  searchForm.cardId = "";
  searchForm.sex = undefined;
};

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  loadVisitorList();
};

const handleCurrentChange = (current: number) => {
  pagination.currentPage = current;
  loadVisitorList();
};

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = "新增访客";
  resetForm();
  dialogVisible.value = true;
};

// 编辑
const handleEdit = (row: Visitor) => {
  dialogTitle.value = "编辑访客";
  Object.assign(formData, row);
  dialogVisible.value = true;
};

// 删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm("确定要删除该访客吗？", "确认删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        const res = await deleteVisitor(id);
        console.log("删除访客响应:", res);
        if (res.code === 0) {
          ElMessage.success("删除成功");
          loadVisitorList();
        } else {
          ElMessage.error(res.message || "删除失败");
        }
      } catch (error) {
        console.error("删除访客失败:", error);
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {});
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    formData.tenantId = useUserStore().tenantId;
    console.log("提交的访客数据:", formData);
    const res = await addVisitor(formData);
    if (res.code === 0) {
      ElMessage.success(
        dialogTitle.value.includes("新增") ? "添加成功" : "修改成功"
      );
      dialogVisible.value = false;
      loadVisitorList();
    } else {
      ElMessage.error(res.message || "操作失败");
    }
  } catch (error) {
    console.error("提交表单失败:", error);
  }
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(formData, {
    id: 0,
    name: "",
    sex: 1,
    phone: "",
    cardId: "",
    image: "",
    cellId: undefined,
    cellBuilding: undefined,
    cellUnit: undefined,
    cellHouse: ""
  });
};

// 处理图片上传成功
const handleImageUpload = (response: any) => {
  if (response.code === 0 && response.data) {
    formData.image = response.data;
    ElMessage.success("图片上传成功");
  } else {
    ElMessage.error(response.message || "图片上传失败");
  }
};

// 图片上传前的校验
const beforeAvatarUpload = (file: File) => {
  const isJPG =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error("上传头像图片只能是 JPG/PNG 格式!");
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
};
</script>

<style scoped>
.main {
  padding: 20px;
}

.stats-item {
  text-align: center;
}

.stats-number {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.stats-label {
  font-size: 14px;
  color: #606266;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

/* 访客表单容器 */
.visitor-form-container {
  display: flex;
  gap: 30px;
  padding: 20px;
  align-items: flex-start;
}

.form-left {
  flex: 1;
}

.form-right {
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* 表单样式调整 */
.visitor-form .el-form-item {
  margin-bottom: 20px;
}

.visitor-form .el-form-item__label {
  text-align: left;
  padding: 0 0 6px 0;
  font-weight: 500;
  font-size: 14px;
  color: #303133;
}

/* 自定义输入框 */
.custom-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  border-color: #dcdfe6;
  transition: all 0.3s;
}

.custom-input :deep(.el-input__wrapper):hover {
  border-color: #c0c4cc;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 自定义单选框 */
.custom-radio-group :deep(.el-radio) {
  margin-right: 30px;
  font-size: 14px;
}

.custom-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #409eff;
  background-color: #409eff;
}

.custom-radio-group :deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #409eff;
}

/* 被访人信息区域 */
.visited-info-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

/* 楼栋单元输入框容器 - 改进版 */
.building-unit-container.improved {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.building-select :deep(.el-input__wrapper) {
  border-radius: 6px;
}

.building-input {
  text-align: center;
  height: 36px;
}

.building-input :deep(.el-input__wrapper) {
  border-radius: 6px;
}

.building-text {
  margin: 0 2px;
  color: #606266;
  font-size: 14px;
}

/* 头像上传样式 - 改进版 */
.avatar-uploader.improved {
  width: 160px;
  height: 160px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  transition: all 0.3s;
}

.avatar-uploader.improved:hover {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.avatar-uploader.improved .avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.avatar-uploader-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.avatar-uploader-icon .el-icon {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.upload-text {
  color: #c0c4cc;
  font-size: 14px;
}

/* 对话框样式调整 */
.visitor-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__title) {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

:deep(.el-dialog__header) {
  padding-top: 24px;
  padding-bottom: 16px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-dialog__footer) {
  padding: 15px 30px 20px;
  background-color: #f8f9fa;
  border-top: 1px solid #ebeef5;
}

/* 按钮样式调整 - 改进版 */
.dialog-footer.improved {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  border-radius: 6px;
  border-color: #dcdfe6;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #c0c4cc;
  background-color: #f2f6fc;
}

.confirm-btn {
  border-radius: 6px;
  background-color: #409eff;
  transition: all 0.3s;
}

.confirm-btn:hover {
  background-color: #66b1ff;
}

/* 输入框样式调整 */
:deep(.el-input__wrapper) {
  box-shadow: none;
  border-radius: 6px;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 现代风格对话框 */
.visitor-dialog-modern {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

:deep(.visitor-dialog-modern .el-dialog__header) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  padding: 24px 30px;
  border-bottom: none;
}

:deep(.visitor-dialog-modern .el-dialog__title) {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

:deep(.visitor-dialog-modern .el-dialog__close) {
  color: #ffffff;
  font-size: 20px;
  opacity: 0.8;
  transition: all 0.3s;
}

:deep(.visitor-dialog-modern .el-dialog__close:hover) {
  opacity: 1;
  transform: scale(1.1);
}

:deep(.visitor-dialog-modern .el-dialog__body) {
  padding: 30px;
  background-color: #fafafa;
}

:deep(.visitor-dialog-modern .el-dialog__footer) {
  padding: 20px 30px;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}

/* 现代布局 */
.visitor-form-container.modern-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.form-content {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.form-image {
  width: 220px;
}

/* 表单网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-item-modern {
  margin-bottom: 0;
}

:deep(.form-item-modern .el-form-item__label) {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  padding-bottom: 8px;
}

/* 现代输入框 */
.modern-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  background-color: #f8f9fa;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-input :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.modern-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.modern-input :deep(.el-input__icon) {
  color: #c0c4cc;
}

/* 性别选择器 */
.gender-selector {
  display: flex;
  align-items: center;
}

.gender-options :deep(.el-radio) {
  margin-right: 30px;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.gender-option:hover {
  background-color: #f0f2f5;
}

.gender-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.male-icon {
  background-color: #409eff;
}

.female-icon {
  background-color: #f56c6c;
}

:deep(.gender-option .el-radio__input.is-checked .el-radio__inner) {
  border-color: #409eff;
  background-color: #409eff;
}

:deep(.gender-option .el-radio__input.is-checked + .el-radio__label) {
  color: #409eff;
  font-weight: 500;
}

/* 分割线 */
:deep(.el-divider) {
  background-color: #ebeef5;
  margin: 24px 0;
}

.divider-text {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
}

/* 楼栋信息容器 */
.building-info-container {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.building-item {
  margin-bottom: 0;
}

.building-select-container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.building-select-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.building-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  background-color: #ffffff;
  border-color: #dcdfe6;
  transition: all 0.3s;
}

.building-select :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.building-select :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.building-label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

/* 图片上传区域 */
.image-upload-wrapper {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.image-upload-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

:deep(.image-upload-header .el-icon) {
  color: #409eff;
  font-size: 18px;
}

.upload-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* 头像上传器 */
.avatar-uploader {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: block;
}

.avatar-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.avatar-container:hover {
  transform: scale(1.02);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 12px;
  text-align: center;
}

.change-text {
  color: #ffffff;
  font-size: 12px;
}

.avatar-uploader-placeholder {
  width: 100%;
  height: 100%;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-uploader-placeholder:hover {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.upload-icon {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 12px;
}

.upload-instruction {
  text-align: center;
}

.upload-text {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-button {
  border-radius: 8px;
  border-color: #dcdfe6;
  color: #606266;
  transition: all 0.3s;
  padding: 8px 24px;
}

.cancel-button:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
  color: #303133;
}

.submit-button {
  border-radius: 8px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  transition: all 0.3s;
  padding: 8px 24px;
}

.submit-button:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #91ccff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

:deep(.dialog-footer .el-button .el-icon) {
  margin-right: 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .visitor-form-container.modern-layout {
    flex-direction: column;
    gap: 20px;
  }

  .form-image {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .building-select-container {
    flex-direction: column;
    align-items: stretch;
  }

  .building-select-wrapper {
    justify-content: center;
  }

  .avatar-uploader {
    width: 140px;
    height: 140px;
  }
}
</style>
